import {
  Button,
  Col,
  Form,
  Input,
  message,
  Radio,
  Row,
  TreeSelect,
} from 'antd';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { history } from 'umi';
import styles from './index.less';

import { formatTreeData } from '@/services/common';
import {
  getByScope,
  ucOrganizationGetId,
  ucOrganizationSave,
  ucOrganizationUpdate,
} from '@/services/deptControl';

export default (props: any) => {
  const {
    location: { state },
  } = props;

  const [form] = Form.useForm();

  // 编辑机构获取全部数据
  const [department, setDepartment] = useState({});

  // 是否为详情
  const [view, setView] = useState<boolean>(false);

  useMemo(async () => {
    if (state?.id) {
      const result = await ucOrganizationGetId(state?.id);
      console.log(result);
      setDepartment(result?.data);
      form.setFieldsValue(result?.data);
    }
    state?.view && setView(true);
  }, [state]);

  // 组织架构
  const [departmentTree, setDepartmentTree] = useState([]);

  useEffect(() => {
    getDepartmentTreeByRole();
  }, []);

  // 初始化组织树
  const getDepartmentTreeByRole = async () => {
    // 根据接口获取值
    let res = await getByScope();

    // 写入值
    setDepartmentTree(formatTreeData(res?.data));
  };

  const save = () => {
    form
      .validateFields()
      .then(async (value) => {
        console.log(value);
        if (state?.id) {
          const result = await ucOrganizationUpdate({
            ...department,
            ...value,
          });
          if (result.code === 200) {
            message.success('数据编辑成功');
            history.push('/features/dept/index');
          }
        } else {
          const result = await ucOrganizationSave({
            ...value,
          });
          if (result.code === 200) {
            message.success('数据新增成功');
            history.push('/features/dept/index');
          }
        }
      })
      .catch((errorInfo) => {
        console.log(errorInfo);
      });
  };

  return (
    <>
      <div className={styles.containerStyles}>
        <Form layout="vertical" form={form}>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                label="节点类型"
                name="type"
                rules={[{ required: true, message: '请选择节点类型!' }]}
              >
                <Radio.Group disabled={view}>
                  <Radio value={0}>部门</Radio>
                  <Radio value={1}>公司</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="父级节点"
                name="parentId"
                rules={[{ required: true, message: '请选择父级节点!' }]}
              >
                <TreeSelect disabled={view} treeData={departmentTree} />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                label="机构名称"
                name="name"
                rules={[{ required: true, message: '请输入机构名称!' }]}
              >
                <Input disabled={view} />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                label="机构英文名称"
                name="nameEn"
                rules={[{ required: true, message: '请输入机构英文名称!' }]}
              >
                <Input disabled={view} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="简称"
                name="shortName"
                rules={[{ required: true, message: '请输入机构简称!' }]}
              >
                <Input disabled={view} />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                label="负责人姓名"
                name="personInCharge"
                rules={[{ required: true, message: '请输入机构负责人姓名!' }]}
              >
                <Input disabled={view} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="联系方式"
                name="phone"
                rules={[{ required: true, message: '请输入联系方式!' }]}
              >
                <Input disabled={view} />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                label="行业"
                name="businessType"
                rules={[{ required: true, message: '请输入行业类型!' }]}
              >
                <Input disabled={view} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="地址"
                name="address"
                rules={[{ required: true, message: '请输入机构地址!' }]}
              >
                <Input disabled={view} />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                label="简介"
                name="introduction"
                rules={[{ required: true, message: '请输入机构简介!' }]}
              >
                <Input disabled={view} />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </div>
      <div className={styles.operatingContainer}>
        <Button
          onClick={() => {
            form.resetFields();
            history.push('/features/dept/index');
          }}
        >
          取消
        </Button>
        <Button type="primary" onClick={save}>
          保存
        </Button>
      </div>
    </>
  );
};
